<style>
    .main-list{
      background: #ffffff;
    }
  
    .main-list-hd{
      padding:0px 20px;
      font-size: 18px;
      color:#1162e8;
      height:60px;
      line-height: 60px;
      border-bottom: 1px solid #eaeaea;
    }
  
    .list-item{
      display: flex;
      padding:20px;
      align-items:stretch;
      border-bottom: 1px solid #eaeaea;
    }

    .list-item:hover{
      background:#fafafa;
    }
  
    .item-image{
      width:240px;
      height:150px;
      position: relative;
    }
  
    .item-image a{
      display: block;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
  
    .item-image img{
      width:240px;
      height:150px;
      display: block;
      border-radius: 5px;
    }
  
    .item-content{
      padding-left:20px;
      flex-grow: 1;
    }
  
    .item-content .item-title{
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: normal;
    }
  
    .item-content .item-title a{
      display: block;
      color:#1162e8;
    }
  
    .item-content .item-desc{
      height: 72px;
      line-height: 24px;
      font-size: 16px;
      overflow: hidden;
      margin-top: 9px;
      color:#666666;
    }
  
    .item-content .item-meta{
      height: 30px;
      line-height: 30px;
      margin-top: 5px;
      line-height: 30px;
    }
  
    .item-content .item-meta .item-meta-el{
      display:inline-block;
      margin-right: 20px;
      font-size: 14px;
      color:#999999;
    }
  
    .item-category{
      position: absolute;
      top:15px;
      left:15px;
      font-size: 16px;
      padding:5px 10px;
      background: rgba(0,0,0,0.7);
      color:#ffffff;
      border-radius: 5px;
    }
  
    .item-category:hover{
      color:#ffffff;
    }



  </style>
  
  <div class="main-list">

    <div class="main-list-hd">
      {:lang('Recent articles')}
    </div>
  

    <div class="list-context">

        {volist name='chapter' id='vo'}

        <div class="list-item hvr-underline-from-left">
            <div class="item-image">
                <a class="item-category" target="_blank" href="{:url('index/category',['id'=>$vo.cateid])}">{:lang($vo.category_name)}</a>
                <a href="{:url('index/artical',['id'=>$vo.id])}" target="_blank">
                    <img src="{$vo.cover}" class="hvr-grow-shadow">
                </a>
            </div>

            <div class="item-content">
                <h3 class="item-title">
                    <a href="{:url('index/artical',['id'=>$vo.id])}" target="_blank">{$vo.title}</a>
                </h3>
                <div class="item-desc">
                    {$vo.content}
                </div>
    
                <div class="layui-row item-meta">
                    <div class="layui-col-lg7">
                        <a href="javascript:void(0)" class="item-meta-el">{$vo.nickname}</a>
                        <span class="item-meta-el">{$vo.create_time}</span>
                    </div>
                </div>

            </div>
        </div>
        {/volist}

    </div>
  
  </div>